import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

function MyEditor(props) {
	// editor 实例
	const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
	// const [editor, setEditor] = useState(null)                   // JS 语法

	// 编辑器内容

	// 如果有初始值，使用传入的值，否则使用默认值
	useEffect(() => {
		if (!props.value && props.onChange) {
			props.onChange('<p>hello</p>');
		}
	}, []);

	// 工具栏配置
	const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
	// const toolbarConfig = { }                        // JS 语法

	// 编辑器配置
	const editorConfig: Partial<IEditorConfig> = {
		// TS 语法
		// const editorConfig = {                         // JS 语法
		placeholder: '请输入内容...',
	};

	// 及时销毁 editor ，重要！
	// useEffect(() => {
	// 	return () => {
	// 		if (editor == null) return;
	// 		editor.destroy();
	// 		setEditor(null);
	// 	};
	// }, [editor]);

	return (
		<>
			<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
				<Toolbar
					editor={editor}
					defaultConfig={toolbarConfig}
					mode='default'
					style={{ borderBottom: '1px solid #ccc' }}
				/>
				<Editor
					defaultConfig={editorConfig}
					value={props.value}
					onCreated={setEditor}
					onChange={(editor) => props.onChange(editor.getHtml())}
					mode='default'
					style={{ height: '500px', overflowY: 'hidden' }}
				/>
			</div>
		</>
	);
}

export default MyEditor;
